import { getObjectStorage } from "@/utils/storage"
import { mobile, broadcastEvent } from "@/utils/tools"
import { useMouseType } from "@/hooks"

const maxSize = 20
const minSize = 16

export const fontInfo = { default: true, monospace: false, Consolas: false, font: false, font2: false }

export const change = (lightTheme) => {
    broadcastEvent("darkMode", lightTheme)
    darkMode(lightTheme)
}

const darkMode = (lightTheme) => {
    document.documentElement.classList.add("glass")

    if (lightTheme) {
        document.documentElement.classList.remove("dark")
    } else {
        document.documentElement.classList.add("dark")
    }
}

const mobileMode = () => {
    document.documentElement.classList.add("mobile")
    document.documentElement.style.setProperty("--font-size", "14px")
}

export let config = $ref({
    fontFamily: "font2",
    fontSize: minSize,
    background: "",
    lightTheme: true,
    mouseType: true,
    showPaoPao: false
})

export const decrease = () => {
    if (config.fontSize > minSize) {
        config.fontSize -= 1
        handleChange()
    }
}

export const increase = () => {
    if (config.fontSize < maxSize) {
        config.fontSize += 1
        handleChange()
    }
}

export const fontFamilyChange = (value) => {
    document.documentElement.style.setProperty("--font-family", (value === "default" ? '' : value) || "fojiya, cursive, monospace")
    document.documentElement.style.setProperty("--font-weight", fontInfo[value] ? 'bold' : '')
}

const handleChange = () => {
    if (config.fontSize >= minSize && config.fontSize <= maxSize) {
        document.documentElement.style.setProperty("--font-size", config.fontSize + "px")
    }
}

export const initPageStyle = () => {
    const storage = getObjectStorage("config", config)
    config = storage.value
    handleChange()
    fontFamilyChange(config.fontFamily)
    darkMode(config.lightTheme)
    if (mobile) mobileMode()
    useMouseType(() => { return { showMouse: config.mouseType, showPaoPao: config.showPaoPao } })
}